<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/bootstrap.css">
	<script src="../lib/jquery.min.js"></script>
	<style>
		.td{
			width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
		.big{
			position: absolute;
			top: 0;
			background: red;
			width: 200px;
			z-index: 10;
			border-radius: 8px;
		}
		td{
			position: relative;
		}
	</style>
</head>
<body>
	<table class="table table-bordered" >
		<tr>
			<td ><div class="td">
				就斯蒂芬斯蒂芬健康收到了快捷方式大家私搭乱建疯狂老师就斯蒂芬斯蒂芬健康收到了快捷方式大家私搭乱建疯狂老师
			</div></td>
		</tr>
		<tr>
			<td ><div class="td">就斯蒂芬斯蒂芬健康收到了快捷方式大家私搭乱建疯狂老师就斯蒂芬斯蒂芬健康收到了快捷方式大家私搭乱建疯狂老师</div></td>
		</tr>
		<tr>
			<td >
			<div class="td">就斯蒂芬斯蒂芬健康收到收到到</div></td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	$(function(){
			$('.td').on('click',function(){
		console.log($(this).text().length>14)
		if($(this).text().length>14){
			$(this).parent().append("<div class='big'></div>").find('.big').text($(this).text()).append("<span class='close'>X</span>")
		}
		});
		$('body').on('click','.close',function(){
			$(this).parent().remove()
		})
	})
</script>
</html>